<template>
	<view class="page_cont">
		<view class='user_city' id="top">
			<view class='title_wrap'>
				<view class='title'>已选城市</view>
				<view class='text'>(最多三个城市)</view>
			</view>
			<view class='scroll_box'>
				<scroll-view class='scroll_user_city' scroll-x="true" scroll-with-animation="true">
					<view class='item_wrap' v-for="(item,index) in check_list" :key="index">
						<view class='item'>
							<view class='text'>{{item}}</view>
							<image class='icon' src="/static/icon9.png" @click="del_check_city(index)"></image>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="check_title">选择城市</view>
		</view>
		<view class='check_wrap'>
			<scroll-view class='province' :class="{'left':check1}" :style="{height:windowHeight-top_height+'px',top:top_height+'px'}" scroll-y="true" scroll-with-animation="true">
				<view class='item' :class="province_index==index?'active':''" v-for="(item,index) in provinces" :key="index" @click="check_province(index,item)">{{item.shortName}}</view>
			</scroll-view>
			<scroll-view class='city' :class="{'right':!check1, 'left':check2}" :style="{height:windowHeight-top_height+'px'}" scroll-y="true" scroll-with-animation="true">
				<!-- <view class='item' :class="city_index==-1?'active':''" @click="check_city(-1,'')">全{{province}}</view> -->
				<view class='item' :class="city_index==index?'active':''" v-for="(item,index) in citys" :key="index" @click="check_city(index,item)">{{item.shortName}}</view>
			</scroll-view>
			<scroll-view class='area' :class="{'right':!check2}" :style="{height:windowHeight-top_height+'px'}" scroll-y="true" scroll-with-animation="true">
				<view class='item' :class="city_index==-1?'active':''" @click="check_area(-1,'')">全{{city}}</view>
				<view class='item' :class="area_index==index?'active':''" v-for="(item,index) in areas" :key="index" @click="check_area(index,item)">{{item.shortName}}</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import config from "../../api/config.js"
	import util from "../../utils/util.js"
	export default{
		data(){
			return {
				windowHeight: '',
				top_height: '',
				check_list: [],
				provinces: [],
				citys: [],
				areas:[],
				province: '',
				provinceCode: '',
				intentionProvinceCode: [],
				intentionProvinceName: [],
				city: '',
				cityCode: '',
				intentionCityCode: [],
				intentionCityName: [],
				area: '',
				areaCode: '',
				intentionRegionCode: [],
				intentionRegionName: [],
				province_index: -1,
				city_index: -2,
				area_index: -2,
				check1:false,
				check2:false,
				check_text: ''
			}
		},
		onLoad(options) {
			// console.log(options)
			var that=this;
			var sysinfo = wx.getSystemInfoSync();
			that.windowHeight=sysinfo.windowHeight;
			if(options.data){
				var data=JSON.parse(options.data);
				this.intentionProvinceCode=data.intentionProvinceCode?data.intentionProvinceCode.split(","):[];
				this.intentionProvinceName=data.intentionProvinceName?data.intentionProvinceName.split(","):[];
				this.intentionCityCode=data.intentionCityCode?data.intentionCityCode.split(","):[];
				this.intentionCityName=data.intentionCityName?data.intentionCityName.split(","):[];
				this.intentionRegionCode=data.intentionRegionCode?data.intentionRegionCode.split(","):[];
				this.intentionRegionName=data.intentionRegionName?data.intentionRegionName.split(","):[];
			}
			if(options.citys){
				this.check_list=options.citys.split(",")
			}
			//
			that.get_province_list();
		},
		onReady() {
			var that=this;
			const query = uni.createSelectorQuery().in(this);
			query.select('#top').boundingClientRect(data => {
				that.top_height=data.height;
			}).exec();
		},
		methods:{
			// 删除
			del_check_city(index){
				this.check_list.splice(index,1);
				this.intentionProvinceCode.splice(index,1);
				this.intentionProvinceName.splice(index,1);
				this.intentionCityCode.splice(index,1);
				this.intentionCityName.splice(index,1);
				this.intentionRegionCode.splice(index,1);
				this.intentionRegionName.splice(index,1);
				if(this.check1){
					this.province_index=-1;
					this.check1=false;
					this.check2=false;
				}
				this.page_set_data();
			},
			// 省
			check_province(index,item){
				var list=this.check_list,len=list.length;
				if(len<3){
					this.province_index=index;
					this.province=item.shortName;
					this.provinceCode=item.provinceCode;
					this.check_text=item.shortName;
					this.check_list.push(this.check_text);
					this.city_index=-2;
					this.area_index=-2;
					this.check1=true;
					//
					this.get_city_list(item.provinceCode);
				}else{
					util.page_show_toast('最多选择三个城市',1500)
				}
			},
			// 市
			check_city(index,item){
				var len=this.check_list.length;
				this.city_index=index;
				this.city=item.shortName;
				this.cityCode=item.cityCode;
				if(this.check_text!=item.shortName){
					this.check_text=this.check_text+'-'+item.shortName;
					this.check_list[len-1]=this.check_text;
				}
				this.check2=true;
				// 
				this.get_area_list(item.cityCode);
				
				// this.page_set_data();
			},
			// 区
			check_area(index,item){
				var len=this.check_list.length,area=index!=-1?item.shortName:'全'+this.city;
				this.area=area;
				this.area_index=index;
				//
				this.intentionProvinceCode.push(this.provinceCode);
				this.intentionProvinceName.push(this.province);
				this.intentionCityCode.push(this.cityCode);
				this.intentionCityName.push(this.city);
				if(index>-1){
					this.check_text=this.check_text+'-'+area;
					this.check_list[len-1]=this.check_text;
					//
					this.intentionRegionCode.push(item.areaCode);
					this.intentionRegionName.push(item.shortName);
				}else{
					this.intentionRegionName.push(0);
				}
				this.province_index=-1;
				this.check1=false;
				this.check2=false;
				this.page_set_data();
			},
			// 传值
			page_set_data(){
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				prevPage.$vm.citys=this.check_list.join(",");
				prevPage.$vm.intentionProvinceCode=this.intentionProvinceCode.join(",");
				prevPage.$vm.intentionProvinceName=this.intentionProvinceName.join(",");
				prevPage.$vm.intentionCityCode=this.intentionCityCode.join(",");
				prevPage.$vm.intentionCityName=this.intentionCityName.join(",");
				prevPage.$vm.intentionRegionCode=this.intentionRegionCode.join(",");
				prevPage.$vm.intentionRegionName=this.intentionRegionName.join(",");
				prevPage.$vm.screening=true;
			},
			// 获取省
			get_province_list(){
				config.get_province_list().then(res=>{
					this.provinces=res.data.data;
				})
			},
			// 获取市
			get_city_list(code){
				var params={
					"pid": code
				}
				config.get_city_list(params).then(res=>{
					this.citys=res.data.data;
				})
			},
			// 获取区
			get_area_list(code){
				var params={
					"pid": code
				}
				config.get_area_list(params).then(res=>{
					this.areas=res.data.data;
				})
			},
		}
	}
</script>

<style lang="scss">
	.page_cont{
		background: #fff;
		.user_city{
			width: 100%;
			padding: 16rpx 0 34rpx 32rpx;
			box-sizing: border-box;
			.title_wrap{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 16rpx;
				.title{
					height: 50rpx;
					font-size: 36rpx;
					font-weight: 600;
					line-height: 50rpx;
					color: #3F4A58;
				}
				.text{
					padding: 0 24rpx;
					height: 34rpx;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 34rpx;
					color: rgba(121,133,148,0.5);
				}
			}
			.scroll_box{
				width: 100%;
				height: 66rpx;
				overflow: hidden;
				white-space:nowrap;
				margin-bottom: 34rpx;
				.scroll_user_city{
					width: 100%;
					height: 80rpx;
					line-height: 56rpx;
					.item_wrap{
						display: inline-block;
						margin-right: 24rpx;
						.item{
							padding: 16rpx 32rpx;
							background: #F6F7F9;
							border-radius: 8rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							.text{
								height: 34rpx;
								font-size: 24rpx;
								font-weight: 400;
								line-height: 34rpx;
								color: #798594;
								margin-right: 16rpx;
							}
							.icon{
								width: 24rpx;
								height: 24rpx;
							}
						}
					}
				}
			}
			.check_title{
				height: 42rpx;
				font-size: 30rpx;
				font-weight: 600;
				line-height: 42rpx;
				color: #3F4A58;
			}
		}
		.check_wrap{
			width: 100%;
			position: relative;
			.province{
				position: fixed;
				left: 0;
				width: 100%;
				transition: all 0.3s linear;
				background: rgba(247,249,251,0.7);
				.item{
					height: 106rpx;
					line-height: 106rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #798594;
					text-align: center;
				}
				.active{
					background: #fff;
					color: #5B90FF;
				}
			}
			.city{
				position: fixed;
				left: 0;
				width: 100%;
				transition: all 0.3s linear;
				background: rgba(247,249,251,0.7);
				.item{
					height: 106rpx;
					line-height: 106rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #798594;
					text-align: center;
				}
				.active{
					background: #fff;
					color: #5B90FF;
				}
			}
			.area{
				position: fixed;
				left: 0;
				width: 100%;
				transition: all 0.3s linear;
				background: rgba(247,249,251,0.7);
				.item{
					height: 106rpx;
					line-height: 106rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #798594;
					text-align: center;
				}
				.active{
					background: #fff;
					color: #5B90FF;
				}
			}
			.left{
				left: -100%;
			}
			.right{
				left: 100%;
			}
		}
	}
</style>
